<template>
	<div>
		<div class="wrap-input">
			<el-input prefix-icon="iconfont  icon-shoujiyouxiang" v-model="logphone" placeholder="请输入常用手机或者邮箱"></el-input>
		</div>
		<div class="wrap-input">
			<el-input prefix-icon="iconfont  icon-mima" placeholder="请输入密码" @keyup.enter.native="login" v-model="logpassword" show-password></el-input>
		</div>
		<!-- 密码验证 -->
		<div class="wrap-verify">
			<div class="verify-phone">手机验证登陆</div>
			<div class="verify-password">忘记密码</div>
		</div>
		<p>
			<a href="javascript:;">
				<span class="login" :plain="true" @click="login">登陆</span>
			</a>
		</p>
		<p>
			<!--<router-link :to="{path:'/register'}"> </router-link>-->
			<a href="javascirpt:;">
				<span class="register" @click="immeRegister">立即注册</span>
			</a>
		</p>
		<ul class="qq-list">
			<li>
				<span>第三方账号登陆</span>
			</li>
			<li>
				<span class="iconfont  icon-weibo font"> </span>
			</li>
			<li>
				<span class="iconfont icon-weixin font"></span>
			</li>
			<li>
				<span class="iconfont  icon-qq font"></span>
			</li>
		</ul>

	</div>
</template>
<script>
	export default {
		data() {
			return {
				logphone: "15883933555",
				logpassword: "123456",
				ruleForm: {}
			};
		},
		methods: {
			login() {
				//向login传递数据
				this.$emit("fun1",false);
				
				if(this.logphone.trim() == "" || this.logpassword.trim() == "") {
					this.$message.warning("登录账号或密码不能为空！");
				}else{
					this.$router.push({name:'onlineresume'})
				}
			},
			immeRegister(){
				this.$emit('fun1',false);
			}
		}
	};
</script>
<style scoped>
	ul,
	li {
		list-style: none;
		margin: 0px;
		padding: 0px;
	}
	
	.wrap-input {
		max-width: 350px;
		margin: 0 auto;
		margin-top: 30px;
	}
	
	.login-phone {
		width: 100%;
		height: 30px;
		border: 1px solid #ccc;
		border-radius: 5px;
		padding-left: 5px;
	}
	
	a {
		text-decoration: none;
	}
	
	.login {
		display: inline-block;
		padding: 10px 0px;
		width: 350px;
		color: #fff;
		letter-spacing: 5px;
		background: #00bfff;
		margin-top: 30px;
		border-radius: 5px;
	}
	
	.register {
		display: inline-block;
		padding: 10px 0px;
		width: 350px;
		color: #fff;
		letter-spacing: 2px;
		background: #00bfff;
		border-radius: 5px;
	}
	
	.login:hover {
		background: #87ceff;
	}
	
	.register:hover {
		background: #87ceff;
	}
	
	.wrap-verify {
		display: flex;
		max-width: 350px;
		justify-content: space-between;
		margin: 0 auto;
		margin-top: 15px;
	}
	
	.verify-password {
		color: #ccc;
		cursor: pointer;
	}
	
	.verify-phone {
		cursor: pointer;
		color: #00bfff;
	}
	
	.qq-list {
		max-width: 350px;
		margin: 0 auto;
		/* border: 1px solid red; */
		overflow: hidden;
		margin-top: 30px;
	}
	
	.qq-list li {
		text-align: center;
		float: left;
	}
	
	.font {
		font-size: 24px;
		margin: 0px 20px;
		color: #ccc;
		cursor: pointer;
	}
	
	.font:hover {
		color: #00bfff;
	}
	
	.qq-list li:nth-of-type(1) span {
		display: inline-block;
		padding-top: 3px;
		margin-right: 5px;
	}
</style>